<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                雷达扫描图（JRadarView）
                <div class="j-detail">雷达扫描图，支持版本 ^0.9.7</div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content" style="width: 100%; padding: 1rem">
                <div class="content-btns">
                    <div
                        @click="gridType = 'circle'"
                        :class="{
                            'content-btns-btn': true,
                            'content-btns-btn-active': gridType === 'circle',
                        }"
                    >
                        圆形网格
                    </div>
                    <div
                        @click="gridType = 'square'"
                        :class="{
                            'content-btns-btn': true,
                            'content-btns-btn-active': gridType === 'square',
                        }"
                    >
                        正方形网格
                    </div>
                </div>
                <JRadar
                    class="j-radar"
                    :gridType="gridType"
                    :points="points"
                    v-if="gridType === 'circle'"
                >
                </JRadar>
                <JRadar
                    class="j-radar"
                    :gridType="gridType"
                    :points="points"
                    v-else
                >
                </JRadar>
            </div>
        </template>
        <template v-slot:right-p>
            <div>
                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
            </div>
        </template>
        <template v-slot:footer-p>
            <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JRadarViewView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            tableData: [],
            gridType: "circle", // 圆形网格: circle, 正方形网格: square
            points: [
                { x: -50, y: -50 },
                { x: 50, y: 50, isScanShow: false, color: "red", radius: 8 },
                { x: 80, y: 80 },
                { x: 20, y: -20 },
                { x: -30, y: 30 },
            ],
        };
    },
    created() {
        this.initTableData();
        this.initCodeContent();
    },
    mounted() {},
    methods: {
        itemClick(item) {
            console.log("点击了：", item);
        },
        initCodeContent() {
            this.code = `
<template>
    <div class="content" style="width: 100%; padding: 1rem">
        <div class="content-btns">
            <div
                @click="gridType = 'circle'"
                :class="{
                    'content-btns-btn': true,
                    'content-btns-btn-active': gridType === 'circle',
                }"
            >
                圆形网格
            </div>
            <div
                @click="gridType = 'square'"
                :class="{
                    'content-btns-btn': true,
                    'content-btns-btn-active': gridType === 'square',
                }"
            >
                正方形网格
            </div>
        </div>
        <JRadar
            class="j-radar"
            :gridType="gridType"
            :points="points"
            v-if="gridType === 'circle'"
        >
        </JRadar>
        <JRadar 
            class="j-radar" 
            :gridType="gridType"
            :points="points"
             v-else
        > 
        </JRadar>
    </div>
</template>

export default {
    data() {
        return {
            gridType: "circle", // 圆形网格: circle, 正方形网格: square
            points: [
                { x: -50, y: -50 },
                { x: 50, y: 50, isScanShow: false, color: "red", radius: 8 },
                { x: 80, y: 80 },
                { x: 20, y: -20 },
                { x: -30, y: 30 },
            ]
        };
    },
}
            `;
        },
        initTableData() {
            this.tableData = [
                {
                    parameter: "backgroundColor",
                    field: "雷达背景色",
                    type: "String",
                    describe: "默认为'rgba(0, 0, 0, 0.8)'",
                },
                {
                    parameter: "gridColor",
                    field: "网格线颜色",
                    type: "String",
                    describe: "默认为#2EB74E",
                },
                {
                    parameter: "gridType",
                    field: "网格类型",
                    type: "String",
                    describe:
                        "圆形网格: circle, 正方形网格: square；默认为circle",
                },
                {
                    parameter: "gridCount",
                    field: "圆形网格圈数",
                    type: "Number",
                    describe: "gridType为circle时生效，默认为5",
                },
                {
                    parameter: "tickCount",
                    field: "圆形网格刻度数",
                    type: "Number",
                    describe: "gridType为circle时生效，默认为4",
                },
                {
                    parameter: "rowCount",
                    field: "正方形网格行数",
                    type: "Number",
                    describe: "gridType为square时生效，默认为10",
                },
                {
                    parameter: "scanSpeed",
                    field: "扫描速度",
                    type: "Number",
                    describe: "默认为0.01",
                },
                {
                    parameter: "scanAreaAngle",
                    field: "扫描区域角度",
                    type: "Number",
                    describe: "默认为30",
                },
                {
                    parameter: "scanColor",
                    field: "扫描颜色",
                    type: "Array",
                    describe:
                        "默认为['rgba(46, 183, 78, 0.5)', 'rgba(46, 183, 78, 0.1)']，第一个为起始颜色，第二个为结束颜色，为渐变颜色",
                },
                {
                    parameter: "points",
                    field: "点集合",
                    type: "Array",
                    describe: "展开查看具体包含属性",
                    children: {
                        title: this.tableTitle,
                        data: [
                            {
                                parameter: "x",
                                field: "x坐标",
                                type: "Number",
                                describe: "点的x坐标",
                            },
                            {
                                parameter: "y",
                                field: "y坐标",
                                type: "Number",
                                describe: "点的y坐标",
                            },
                            {
                                parameter: "radius",
                                field: "半径",
                                type: "Number",
                                describe: "点的半径，默认为5",
                            },
                            {
                                parameter: "color",
                                field: "颜色",
                                type: "String",
                                describe: "点的颜色，默认为'green'",
                            },
                            {
                                parameter: "isScanShow",
                                field: "是否扫描才显示",
                                type: "Boolean",
                                describe: "是否处于扫描区域才显示，默认为true",
                            },
                        ],
                    },
                },
            ];
        },
    },
};
</script>
<style lang="less" scoped>
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    height: 50vh;
    overflow-y: scroll;
    .j-radar {
        width: 100%;
        height: calc(100% - 3rem);
    }
    &-btns {
        display: flex;
        width: 100%;
        justify-content: space-between;
        max-height: 3rem;
        overflow: hidden;
        &-btn {
            width: 40%;
            text-align: center;
            padding: 0.2em;
            cursor: pointer;
        }
        &-btn-active {
            background: skyblue;
        }
    }
    // width: 50%;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #fafafa;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(191, 191, 191);
    }

    // 较新的 API
    body {
        scrollbar-width: thin;
        scrollbar-color: #718096 #edf2f7;
    }
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
.list-container {
    height: 95%;
    border: 1px solid #eee;
}

.custom-item {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}
</style>
